import React, { useState, useEffect } from 'react'
import { useNavigate, useLocation } from "react-router-dom"
import { Tabs, Badge } from 'antd-mobile'
import { useStore4Tabs } from '../../store/index'
import { TAB_KEY_SORT_FIVE, TAB_KEY_SEVEN_STAR } from '../../constants/index'

import './index.less'

function TopTabs(props) {

    const key = useStore4Tabs(state => state.key)
    const setKey = useStore4Tabs(state => state.setKey)
    const badge4SortFive = useStore4Tabs(state => state.badge4SortFive)
    const badge4SevenStar = useStore4Tabs(state => state.badge4SevenStar)

    return (
        <div className='tabs-wrapper'>
            <div className='tabs-fixed'>
                <Tabs activeKey={key} onChange={setKey}>
                    {/* 排列五 */}
                    <Tabs.Tab key={TAB_KEY_SORT_FIVE} title={
                        badge4SortFive ?
                            <Badge content={badge4SortFive} style={{ '--right': '-10px', '--top': '8px' }}>
                                五
                            </Badge> :
                            '五'
                    }></Tabs.Tab>
                    {/* 七星彩 */}
                    <Tabs.Tab key={TAB_KEY_SEVEN_STAR} title={
                        badge4SevenStar ?
                            <Badge content={badge4SevenStar} style={{ '--right': '-10px', '--top': '8px' }}>
                                七
                            </Badge> :
                            '七'
                    }
                    ></Tabs.Tab>
                </Tabs>
            </div>
        </div>
    )
}

export default TopTabs